<template>
  <div class="board-wrap">
    <div class="board-pic">
    </div>
    <div class="board-content">
      <h1 class="content-title">{{borderInfo.title}}</h1>
      <p class="content-description">{{borderInfo.description}}</p>
      <div class="board-btn" @click="purchase">立即购买</div>
    </div>
  </div>
</template>
<script>
  export default{
    props: {
      borderInfo: {
        type: Object,
        default: function () {
          return {
            title: '开放产品',
            description: '开放产品是一款开放产品',
            to: {}
          };
        }
      }
    },
    methods: {
      purchase () {
        console.log(this.borderInfo.to);
        this.borderInfo.to && this.$router.push(this.borderInfo.to);
      }
    }
  };
</script>
<style>
  .board-wrap{
    display: flex;
    box-sizing: border-box;
    width: 440px;
    height: 165px;
    padding: 20px;
    box-shadow: 0 0 1px #ddd;
    background-color: white;
  }
  .board-wrap>
  .board-pic{
    flex-basis: 125px;
    box-sizing: border-box;
    background-image: url(../../assets/logo.png);
    background-size: cover;
  }

  .board-wrap>
  .board-content>
  .content-title{
    padding: 5px;
    font-weight: bold;
    font-size: 18px;
    text-align: left;
  }

  .board-wrap>
  .board-content>
  .content-description{
    padding: 5px;
    margin-bottom: 15px;
    text-align: left;
  }

  .board-wrap>
  .board-content>
  .board-btn{
    width: 90px;
    line-height: 35px;
    background: linear-gradient(to bottom, rgba(79, 192, 141, 1) 70%, rgba(44, 108, 80, 1));
    cursor: pointer;
    user-select: none;
  }

  .board-wrap>
  .board-content>
  .board-btn:active{
    background: linear-gradient(to top, rgba(79, 192, 141, 1) 70%, rgba(44, 108, 80, 1));
  }
</style>
